<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="./vue.global.js"></script>
    <!-- 会使用最新版本，你最好指定一个版本 -->
    <script src="./naive.js"></script>
</head>
<template>
    <n-dropdown trigger="hover" :options="options" @select="handleSelect">
        <n-button>找个地方休息</n-button>
    </n-dropdown>
</template>

<script>
    import { defineComponent } from "vue";
    import { useMessage } from "naive-ui";

    export default defineComponent({
        setup() {
            const message = useMessage();
            return {
                options: [
                    {
                        label: "滨海湾金沙，新加坡",
                        key: "marina bay sands",
                        disabled: true
                    },
                    {
                        label: "布朗酒店，伦敦",
                        key: "brown's hotel, london"
                    },
                    {
                        label: "亚特兰蒂斯巴哈马，拿骚",
                        key: "atlantis nahamas, nassau"
                    },
                    {
                        label: "比佛利山庄酒店，洛杉矶",
                        key: "the beverly hills hotel, los angeles"
                    }
                ],
                handleSelect(key) {
                    message.info(String(key));
                }
            };
        }
    });
</script>

</html>